<template>
  <div class='mapCanner'>
    <div id="mapDiv" ref="mapDiv" class="mapDiv">loading...</div>
    <el-input v-model="address" size="mini"></el-input>
    <el-button @click="handler">确定</el-button>
  </div>
</template>

<script>

// 高德地图api安全密钥
  window._AMapSecurityConfig = {
  securityJsCode:'2973d6cb74b71cfb4d07df4ab666f77a',
  }
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  name: 'mapCanner',
  data() {
    return {
        map: null,
        // 逆解析
        geoCoder:null,
        // 位置信息
        form:{
            lng:"",// 纬度
            lat:"",// 经度
            address:"",//地区名称
            // 地区编码
            adcode:""
        },
        address:'',
        newAddress:"",
        mountedFlag:false
    }
  },
  components: {},
 props: {
    // eslint-disable-next-line vue/no-dupe-keys
    townAddress: {
     type:String,
     default:''
    },
 },
 watch:{
  address(newVal,oldVal){
        if(newVal !== oldVal){
          this.newAddress = newVal
        }
    },
    mountedFlag:{
      handler(newVal){
        if(newVal){

          this.MarkLocation(this.newAddress,this)
          this.$emit('townAddressChange',this.newAddress)
        }
      }
    }
 },
 created(){
  
 },
  mounted() {
    this.address = this.townAddress
    this.init(14,[116.397128, 39.916527],this)
  },
  beforeDestroy(){
    this.address = ''
    this.newAddress = ''
  },
  
  methods: {
    init(zoom,arr,_this){
        AMapLoader.load({
            key:'d51bec60b9c1030c4872bb20b737f492',
            version:'1.4.0',
            resizeEnable:true,
            plugins:[
            "AMap.Scale",
            "AMap.ToolBar",
            "AMap.AutoComplete",
            "AMap.PlaceSearch",
            "AMap.ControlBar",
            "AMap.MouseTool",
            "AMap.Geolocation",
            "AMap.Geocoder"
            ],// 这些是需要的插件
        }).then((AMap)=>{
            this.map = new AMap.Map('mapDiv',{
                viewMode: "2D", //  是否为3D地图模式
                zoom: zoom, // 初始化地图级别
                resizeEnable: true,
                center: arr,
            });
            // 地址逆解析插件
            this.geoCoder = new AMap.Geocoder({
                city:"", // 城市设为北京.默认:'全国'
                radius:1000
            })
           // 点击获取经纬度
            this.map.on('click',(e)=>{
              console.log(e);
                let lng = e.lnglat.lng
                let lat = e.lnglat.lat
                _this.form={
                    lng:lng,
                    lat:lat
                }
                _this.regeoCode([lng,lat],_this)
                _this.init(10,[lng,lat],_this)
               
            })
            this.mountedFlag = true
          })
        .catch((e)=>{
            console.log(e);
        })
    },
    //根据经纬度获取地名
    regeoCode(arr,_this) {
      AMap.plugin("AMap.Geocoder", function () {
        let geocoder = new AMap.Geocoder();
        // let marker = new AMap.Marker()
        geocoder.getAddress(arr,function(status,result){
          if(status == 'complete' && result.info === 'OK'){
            _this.address = result.regeocode.formattedAddress
            _this.form['address'] = result.regeocode.formattedAddress
          }
        });
      });
    },
     //根据地名获取坐标信息
     MarkLocation(address, _this) {
      AMap.plugin("AMap.Geocoder", function () {
        let geocoder = new AMap.Geocoder();
        geocoder.getLocation(address, function (status, result) {
          if (status == "complete" && result.info === "OK") {
            //经纬度
            let lng = result.geocodes[0].location.lng;
            let lat = result.geocodes[0].location.lat;
            console.log(lng,lat);
            _this.init(15, [lng, lat],_this);
          }
        });
      });
    },
    handler(){
        this.$emit('change',this.form)
    }
  },
}
</script>
<style lang='less' scoped>
.mapDiv{
    height: 300px;
    // background-color: red;
}
</style>